<template>
  <!--办结项目列表-->
  <div class="verification-preview">
    <div class="content" :style="{ padding: '10px', background: '#fff'}">
      <!--      头部的数据统计-->
      <div class="top-preview">
        <div
          class="preview-box-out"
          :class="{previewDouble:item.key !== 'sum'}"
          v-for="(item,index) in previewData"
          :key="index">
          <div
            @click="handlerPreview(item)"
            :key="item.key"
            class="preview-box hvr-border-fade"
            :class="{activePreview:currentPreview === item.key}">
            <div class="preview-icon">
              <div class="anticon" :class="item.iconClass" v-html="item.icon"></div>
            </div>
            <div class="preview-title">{{ item.title }}</div>
            <div class="preview-total">
              <span style="margin-right:20px;font-size:24px;padding-left:10px" :style="item.valueStyle">{{
                  item.value || 0
                }}</span>
              <span>个</span>
            </div>
          </div>
        </div>
      </div>
<!--      头部按钮-->
      <div class="topBtn" style="margin:10px 0">
        <div style="width: 100%;float: left;display: flex;justify-content: space-between">
          <BtnWidgets
            style="width: 98%;"
            class="m-b"
            v-if="widgets.length"
            ref="btnWidget"
            :widgets="widgets"
            :widget-id="customWidgetId"
            @btn-click="handleBtnClick"
            @btn-select="handleValueChange"
            @query="onSearch" />
        </div>
      </div>
<!--      列表主体-->
      <div class="content-body" ref="tableBox">
        <a-table
          class="dist-box-table"
          bordered
          :expandIconAsCell="false"
          :expandIconColumnIndex="2"
          :rowClassName="setRowClassName"
          :customRow="customRow"
          :loading="table.loading"
          :rowKey="(record, index) => index"
          :columns="table.columns"
          :data-source="table.dataSource"
          :pagination="table.pagination">
<!--         具体字段的设置-->
<!--          项目名称，前面设置不同状态的设置-->
          <template slot="XMMC" slot-scope="text,record">
            <a-tooltip>
              <template slot="title">
                {{ text }}
              </template>
              <span
                v-if="(record.CHILDNUM > 0 || (record.XMSZXZQ && ((record.XMSZXZQ).split(',')).length > 1) )"
                class="kua"
                style="font-size:12px">跨</span>
              <span v-if="(record.OBJECTTYPE > 1)" class="tui" style="font-size:12px">推</span>
              {{ text }}
            </a-tooltip>
          </template>
          <div slot="filterDropdown" ref="tableFilter" class="table-filter">
            <div class="table-filter-item"></div>
          </div>
          <template slot="XMSZXZQ" slot-scope="text">
            <a-tooltip>
              <template slot="title">
                {{ text }}
              </template>
              {{ text }}
            </a-tooltip>
          </template>
          <template slot="XMSZXZQDM" slot-scope="text">
            <a-tooltip>
              <template slot="title">
                {{ text }}
              </template>
              {{ text }}
            </a-tooltip>
          </template>
          <template slot="PROGRESS" slot-scope="text,record">
            <div class="progress-ceil" :class="{wFull:record.BUSINESSTYPE==='农用地转用和土地征收', progressalign:reportPreviewTitle}">
              <span
                class="progress-text"
                :class="{currentstage:getCurrentStage(record.MAX_STAGENAME,item), overstage:getOverStage(record.STAGENAME,item) }"
                v-for="(item,index) in table.progressData[record.BUSINESSTYPE]"
                :key="index">{{ item.name }}</span>
            </div>
          </template>
          <template slot="expandIcon" slot-scope="record">
            <span class="expand-icon" @click="handlerExpandIcon(record)" v-if="(record.record.CHILDNUM > 0)">
              <a-icon v-if="!record.expanded" style="color:#969ba1" type="caret-up"/>
              <a-icon v-else style="color:#969ba1" type="caret-down"/>
            </span>
            <span v-else style="display:inline-block;width:30px"></span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import BtnWidgets from '@c/Button/BtnWidgets'
import PageInitFn from '@/api/pageInitFn'
import btnEvent from '@/api/btnEvent'
import duban from '@/assets/img/duban.svg?inline'
import warn from '@/utils/warning'
import sqlService from '@/api/sqlService'
import dicService from '@/api/dicService'
export default {
  name: 'CompletedProjectList',
  data () {
    return {
      duban,
      customWidgetId: '',
      collectRateNum: 1,
      widgets: [],
      tableColumns: [],
      previewData: [
        {
          previewStyle: 'background-color:rgba(238,243,250,1)',
          icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-bianzu21"></use></svg>',
          iconClass: 'w-40',
          title: '总数',
          key: 'sum',
          value: '0',
          valueStyle: 'color:#568aeb'
        },
        {
          previewStyle: 'background:linear-gradient(90deg,rgba(80,213,201,0.00), rgba(80,213,201,0.15))',
          icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shoudongshangbao"></use></svg>',
          iconClass: 'w-40',
          title: '调用异常',
          key: 'create',
          value: '0',
          valueStyle: 'color:#77d2c9'
        },
        {
          previewStyle: 'background:linear-gradient(90deg,rgba(100,202,252,0.00), rgba(100,202,252,0.20));margin:0 10px',
          icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangbaojinhangzhong"></use></svg>',
          iconClass: 'w-40',
          title: '调用进行',
          key: 'progress',
          value: '0',
          valueStyle: 'color:#7ec8f8'
        },
        {
          previewStyle: 'background:linear-gradient(90deg,rgba(80,213,201,0.00), rgba(80,213,201,0.15))',
          icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangbaojiean"></use></svg>',
          iconClass: 'w-40',
          title: '调用完成',
          key: 'over',
          value: '0',
          valueStyle: 'color:#77d2c9'
        }
      ],
      currentPreview: 'sum',
      filter: {
        businessFilter: this.$route.meta.matterType,
        businessNickFilter: null,
        filterText: '',
        pageIndex: 1,
        pageSize: 10
      },
      businessNickFilter: null,
      table: {
        columns: [],
        dataSource: [],
        loading: false,
        rowSelection: {
          selectedRowKeys: [],
          selectedRows: [],
          onChange: (selectedRowKeys, selectedRows) => {
            this.table.rowSelection.selectedRowKeys = selectedRowKeys
            this.table.rowSelection.selectedRows = selectedRows
          }
        },
        pagination: {
          pageSize: 11, // 默认每页显示数量
          total: 0,
          current: 1,
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['11', '20', '50', '100', '200', '500'], // 每页数量选项
          showTotal: (total) => `共${total}条数据`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            this.filter.pageIndex = 1
            this.filter.pageSize = pageSize
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          },
          onChange: (current, pageSize) => {
            this.filter.pageIndex = current
            this.filter.pageSize = pageSize
            this.table.pagination.current = current
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          }
        }
      },
      rowId: '',
      pageInitFn: PageInitFn
    }
  },
  components: {
    BtnWidgets
  },
  methods: {
    //获取当前的环节
    getCurrentStage (record, item) {
      if (record && (item.value).some(val => val === record)) {
        return true
      } else {
        return false
      }
    },
    //获取所有的环节
    getOverStage (record, item) {
      if (record) {
        const overData = record.split(',')
        let result = false
        overData.forEach(val => {
          if (result) return
          result = (item.value).some(i => i === val)
        })
        return result
      } else {
        return false
      }
    },
    //获取接口调用的情况
    async getInterfaceOverTotal () {
      const sqlParam = {
        sqlConfigName: 'getReportTotals'
      }
      await sqlService.pageQuery(sqlParam).then((d) => {
        if (!d.rows || d.rows.length === 0) {

        }
        const countNum = d.rows[0]
        //计算对应接口调用情况的项目数量
        this.previewData.forEach(item => {
          item.forEach(val => {
            switch (val.key) {
              case 'sum':
                val.value = countNum.FINISH_NUM + countNum.NOFINISH_NUM
                break
              case 'progress':
                val.value = countNum.NOFINISH_NUM
                break
              case 'over':
                val.value = countNum.FINISH_NUM
                break
              case 'push':
                val.value = countNum.AUTO_REPORT
                break
              case 'create':
                val.value = countNum.HAND_REPORT
                break
              default:
                break
            }
          })
        })
      })
    },
    //筛选对应接口调用情况的项目数据
    handlerPreview (record) {
      this.currentPreview = record.key
      this.initConfig()
      switch (record.key) {
        case 'sum':
          this.currentstage = ''
          this.objectType = ''
          this.loadData()
          break
        case 'progress':
          this.currentstage = '0'
          this.objectType = ''
          this.loadData()
          break
        case 'over':
          this.currentstage = '1'
          this.objectType = ''
          this.loadData()
          break
        case 'push':
          this.currentstage = ''
          this.objectType = 2
          this.loadData()
          break
        case 'create':
          this.currentstage = ''
          this.objectType = 1
          this.loadData()
          break
        default:
          break
      }
    },
    //初始化列表的参数
    initConfig () {
      this.table.pagination.current = 1
      this.filter.pageIndex = 1
      this.table.expandedRowKeys = []
      this.rowId = ''
      this.rowData = {}
    },
    onSearch (filterText) {
      this.filter.pageIndex = 1
      this.loadData(filterText)
    },
    getLight (flowLimit, taskLimit) {
      return warn.checkWarning(flowLimit, taskLimit)
    },
    setRowClassName (record, index) {
      return this.pageInitFn.setRowClassName(record)
    },
    handleBtnClick (btn) {
      this.pageInitFn.handleBtnClick(btn)
    },
    handleValueChange (value) {
      this.businessNickFilter = value.businessNickName || value.undefined
      this.loadData(this.filterText)
    },
    customRow (record) {
      return this.pageInitFn.customRow(record)
    },
    async loadData (filterText = null) {
      this.filterText = filterText || null
      await this.pageInitFn.loadData({
        queryFilter: filterText || undefined,
        businessFilter: this.$route.meta.matterType,
        businessNickFilter: this.businessNickFilter,
        userId: this.userInfo.id
      }, (rows) => {
        const projectIdList = []
        const dataMap = {}
        if (rows && rows.length > 0) {
          rows.forEach(item => {
            dataMap[item.projectId] = item
            item.alertType = 'normal'
            projectIdList.push(item.projectId)
          })
        }
        sqlService.listQuery({
          params: {},
          data: {
            sqlConfigName: 'searchProjectAlertByUser',
            params: {
              userId: this.userInfo.id,
              projectId: projectIdList
            }
          }
        }).then(res => {
          if (res && res.length > 0) {
            res.forEach(item => {
              if (dataMap[item.PID]) {
                const preData = dataMap[item.PID]
                preData.alertType = item.ALERTTYPE
              }
            })
          }
        })
        return rows
      })
    },
    filterDicState (value, Dic) {
      if (!value) return ''
      for (const item of Dic) {
        if (item.value === value) {
          return item.name
        }
      }
    },
    async init () {
      var _this = this
      const routerBoxName = this.$route.meta.rightName
      await dicService.treeDicItemByDicName('可选择表头', '/').then((item) => {
        item.forEach(function (data) {
          if (data.value.indexOf(routerBoxName) !== -1) {
            _this.tableColumns.push(data.name)
          }
        })
      })
    }
  },
  created () {
    this.pageInitFn = new PageInitFn(this)
    this.pageInitFn.created()
  },
  async mounted () {
    await this.pageInitFn.mounted()
    await this.init()
    // this.getInterfaceOverTotal
    this.Event.$on('_REFRESH_TODO_BOX_', this.loadData)
    this.owner = btnEvent.createProcessor(this)
  }
}
</script>

<style lang="less" scoped>

.verification-preview {
  height: 100%;

  .hvr-border-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    // box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  }

  .hvr-border-fade:hover {
    box-shadow: inset 0 0 0 2px rgba(131, 168, 213, .6), 0 0 1px rgba(0, 0, 0, 0);
  }

  .preview-box:hover .preview-icon{
    -webkit-animation-name: hvr-icon-pulse-grow;
    animation-name: hvr-icon-pulse-grow;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }

  .activePreview {
    // box-shadow: 2px 0px 9px 1px #8fbfd7;
    box-shadow: inset 0 0 0 2px rgba(131, 168, 213, .6), 0 0 1px rgba(0, 0, 0, 0);
  }

  @-webkit-keyframes hvr-icon-pulse-grow {
    to {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
    }
  }
  @keyframes hvr-icon-pulse-grow {
    to {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
    }
  }

  .preview-icon {
    .anticon {
      .icon {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
    }
  }

  table tbody tr:hover > td {
    background-color: #e9f7fe !important
  }

  .content {
    display: flex;
    flex-direction: column;
    height: 100%;

    .top-preview {
      position: relative;
      display: flex;
      justify-content: space-between;

      .preview-box-out {
        display: flex;
        flex: 1;
        margin-right: 30px;
      }

      .previewDouble {
        height: 60px;
        align-items: flex-end;
        background-image: url('~@/assets/img/background.png');
        background-size: 100% 100%;

        .preview-box {
          background-image: url('~@/assets/img/boxground.png');
          background-size: 100% 100%;
        }
      }

      .preview-box {
        cursor: pointer;
        display: flex;
        flex: 1;
        height: 55px;
        width: 300px;
        align-items: center;
        border-radius: 5px;
        background-color: #ffffff;
        margin: 0 5px;

        .preview-icon {
          position: relative;
          display: flex;
          flex: 2;
          align-items: center;
          height: 100%;

          .anticon {
            position: absolute;
            right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            width: 40px;
            height: 40px;
          }

          .w-40 {
            .icon {
              width: 100%;
              height: 100%;
            }
          }
        }

        .preview-title {
          // flex: 2;
          width: 70px;
          text-align: center;
        }

        .preview-total {
          display: flex;
          flex: 3;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .top-preview .preview-box-out:first-child {
      flex: 1;

      .preview-box {
        height: 60px;
        margin: 0;
        background-color: #EEF3FA;
      }
    }

    .topBtn {
      .btnDisabled {
        color: rgba(0, 0, 0, 0.25) !important;
      }

      display: flex;

      &-btn {
        flex: 1;
      }

      &-query {
        display: flex;
        justify-content: flex-end;
        flex: 1;

        .search-btn {
          width: 45px;
        }
      }
    }

    // 设置表格滚动
    .content-body {
      flex: 1;
      overflow-y: hidden;
      position: relative;
      .report-filter-dropdown{
        z-index: 1;
        width: 160px;
        position: absolute;
      }
      .ant-dropdown{
        .ant-table-filter-dropdown{
          display: none;
        }
      }

      .ant-table-wrapper {
        height: 100%;
        position: relative;
        z-index: 10;

        .ant-spin-nested-loading {
          height: 100%;

          .ant-spin-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .ant-table {
              flex: 1;
              overflow: auto;
            }

            .ant-pagination {
              .ant-pagination-total-text {
                position: absolute;
                left: 0px;
              }
            }
          }
        }
      }
    }

    .kua {
      text-align: center;
      border-radius: 2px;
      display: inline-block;
      width: 20px;
      height: 20px;
      padding-top: 2px;
      margin-right: 5px;
      background-color: rgba(255, 231, 184, .6);
    }

    .tui {
      text-align: center;
      border-radius: 2px;
      display: inline-block;
      width: 20px;
      height: 20px;
      padding-top: 2px;
      color: #21A994;
      background-color: rgba(169, 236, 215, .6);
    }

    .wFull {
      width: 100% !important;
    }

    .progress-ceil {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 45px;

      .progress-text {
        text-align: center;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        background-color: #ecedf0;
        border-radius: 50%;
        font-size: 12px;
        line-height: 20px;
        font-weight: bold;
        color: #9faab8;
      }

      .currentstage {
        background-color: #faeae5 !important;
        color: #da7452 !important;
      }

      .overstage {
        background-color: #e3f4e9;
        color: #7bc390;
      }
    }

    .nullKua {
      display: inline-block;
      width: 20px;
      height: 20px;
    }

    .expand-icon {
      cursor: pointer;
      display: inline-block;
      width: 30px;
      height: 20px;
      text-align: center;
    }

    .ant-table-expanded-row {
      .inner-title:hover {
        color: #568aea;
      }

      tr:hover > td {
        background-color: #e9f7fe !important;
      }

      .dist-extend {
        td {
          border-left: none !important;
          border-bottom: 0.5px solid #c0cad3 !important;
        }

        .ant-table-tbody {
          td {
            border-right: none !important;
          }
        }
      }

      .dist-extend tr:last-child td {
        border-bottom: none !important;
      }
    }

    .ant-table-expanded-row td:first-child {
      padding: 0px !important;
      // border-bottom: none !important;
    }

    .ant-table-tbody {
      tr {
        background-color: #ffffff !important;

        td {
          border-right: none !important;
          padding: 5px !important;
          // border-bottom: none !important;
        }
      }

      tr td:first-child {
        border-left: 0.5px solid #c0cad3;
      }

      tr td:last-child {
        border-right: 0.5px solid #c0cad3 !important;
        // display: flex;
        // flex-wrap: wrap;
      }
    }

    .ant-table-thead {
      .searchIcon {
        right: 14%;
        font-size: 14px;
        font-weight: bold;

        svg {
          color: #333 !important;
          margin: 0;
          transform: translate(-50%, -50%);
        }
      }
      .comquery{
        right: 0;
      }

      .containSelected {
        svg {
          color: #438ef7;
        }
      }

      tr {
        .ant-table-header-column {
          width: 100%;
          text-align: center;
        }

        th {
          border-right: none !important;
        }
      }
    }
  }
}

</style>
